import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:untitled/pages/FlutterUI/Shopping/product_item.dart';
import 'package:untitled/utils/constants.dart';

class Shopping extends StatefulWidget {
  const Shopping({Key? key}) : super(key: key);

  @override
  State<Shopping> createState() => _ShoppingState();
}

class _ShoppingState extends State<Shopping> {
  int currentSelect = 0;
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Scaffold(
      appBar: buildAppBar(),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Padding(
            padding: EdgeInsets.symmetric(horizontal: 24),
            child: Text("Women",style: TextStyle(fontSize: 22,fontWeight: FontWeight.bold),),
            ),
            SizedBox(height: 20,),
            // tab 
            Container(
              alignment: Alignment.center,
              padding: EdgeInsets.symmetric(horizontal: 10),
              height: 40,
              child: ListView.builder(
                scrollDirection: Axis.horizontal,
                itemCount: productTitles.length,
                itemBuilder: (context,index){
                  return InkWell(
                    onTap: (){
                      setState(() {
                        currentSelect = index;
                      });
                    },
                    child: Container(
                      alignment: Alignment.center,
                      padding: EdgeInsets.symmetric(horizontal: 20,vertical:10 ),
                      child: Text(
                        productTitles[index],
                        style: TextStyle(
                          fontSize: 14,
                          fontWeight: FontWeight.bold,
                          color: currentSelect == index?mPrimaryColor:mScroudTextColor
                        ),
                      ),
                    ),

                  );

                }
              ),
            ),
            SizedBox(height:20),
          // 内容
          Expanded(
            flex: 1,
            child: Padding(
              padding:EdgeInsets.symmetric(horizontal: 15),
              child: GridView.builder(
                itemCount: productList.length,
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2,
                  mainAxisSpacing: 15,
                  crossAxisSpacing:15,
                  childAspectRatio: 0.7,
                  ),
                itemBuilder:(context,index){
                  return ProductItem(size: size,product: productList[index]);

                }
                ),
            
             )
          ),




        ],
      ),

    );
    
  }

  AppBar buildAppBar(){
    return AppBar(
      brightness: Brightness.light,
      backgroundColor:Colors.white,
      elevation: 0,
      leading: Padding(
        padding: EdgeInsets.all(12),
        child: SvgPicture.asset(
          'assets/images/back.svg',
          width: 24,
          height: 24,
          color: mPrimaryColor,
        ),
      ),
      actions: [
        Padding(
          padding: EdgeInsets.all(12),
          child: SvgPicture.asset(
             'assets/images/search.svg',
            width: 24,
            height: 24,
            color: mPrimaryTextColor,
          ),
        ),
        Padding(
          padding: const EdgeInsets.all(12),
          child: SvgPicture.asset(
            'assets/images/cart.svg',
            width: 24,
            height: 24,
            color: mPrimaryTextColor,
          ),
        ),
      ],
    );
  }
}